<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark">
          <div class="layout-logo"></div>
          <div class="layout-nav">
            <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>
              Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>
              主题
            </MenuItem>
            <MenuItem name="3" @click.native="modal = true">
              <Icon type="ios-analytics"></Icon>
              修改密码
            </MenuItem>
            <MenuItem name="4" @click.native="logout">
              <Icon type="ios-people"></Icon>
              退出
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider
          ref="siders"
          hide-trigger
          :style="{ background: '#fff' }"
          collapsible
          :collapsed-width="78"
          v-model="isCollapsed"
        >
          <Menu
            :open-names="openItem"
            :active-name="$route.path"
            @on-select="handleSelect"
            :theme="Theme"
            width="auto"
            ref="menu"
            :class="menuitemClasses"
          >
            <Submenu name="月黑见渔灯">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                <span>月黑见渔灯</span>
              </template>
              <MenuItem name="/users" @click.native="gousers"
                ><Icon type="ios-people"></Icon><span>用户管理</span></MenuItem
              >
              <MenuItem name="/echart" @click.native="view"
                ><Icon type="ios-color-palette-outline" /><span
                  >数据统计</span
                ></MenuItem
              >
            </Submenu>
            <Submenu name="文章发布">
              <template slot="title">
                <Icon type="ios-keypad"></Icon>
                <span>文章发布</span>
              </template>
              <MenuItem name="/readbook" @click.native="readBook"
                ><Icon type="ios-brush" /><span>查看文章</span></MenuItem
              >
              <MenuItem name="2-2"
                ><Icon type="ios-cafe" /><span>发布文章</span></MenuItem
              >
            </Submenu>
            <Submenu name="管理员操作台">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>
                <span>管理员操作台</span>
              </template>
              <MenuItem name="/write" @click.native="writeArt"
                ><Icon type="ios-brush" /><span>新增文章</span></MenuItem
              >
              <MenuItem name="/personTarget" @click.native="goTarget"
                ><Icon type="md-navigate" /><span>个人目标</span></MenuItem
              >
            </Submenu>
            <MenuItem name="/user" @click.native="goAbout">
              <Icon type="md-document" />
              <span>个人简介</span>
            </MenuItem>
            <MenuItem name="/work" @click.native="goAWork">
              <Icon type="ios-cube" />
              <span>工作台</span>
            </MenuItem>
            <MenuItem name="/listen" @click.native="goliu">
              <Icon type="ios-mail-open" />
              <span>留言板</span>
            </MenuItem>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '24px 24px' }">
          <!-- <Icon
            @click.native="collapsedSider"
            :class="rotateIcon"
            :style="{ margin: '0 20px' }"
            type="md-menu"
            size="24"
          ></Icon> -->
          <div class="tags">
            <Row>
              <Col span="1">
                <Icon
                  @click.native="collapsedSider"
                  :class="rotateIcon"
                  :style="{ margin: '2px 20px' }"
                  type="md-menu"
                  size="24"
                ></Icon
              ></Col>
              <Col span="20">
                <Tag
                  v-for="(tag, index) in tags"
                  color="primary"
                  :key="tag.name"
                  :name="tag.name"
                  :checked="$route.name === tag.name"
                  @on-close="handleClose(tag, index)"
                  @click.native="changeMenu(tag)"
                  :closable="tag.name !== '首页'"
                  >{{ tag.name }}</Tag
                >
              </Col>
            </Row>
          </div>
          <Content
            :style="{ padding: '24px', minHeight: '85vh', background: '#fff' }"
          >
            <router-view></router-view>
          </Content>
          <!-- <p style="text-align:center;margin:10px">liz个人博客<a href="http://lizdoris.cn" target="blank">http://lizdoris.cn</a></p> -->
        </Layout>
      </Layout>
    </Layout>
    <Modal v-model="modal" title="修改密码" @on-ok="ok" @on-cancel="cancel">
      <Form :label-width="80">
        <FormItem label="原密码">
          <Input type="password" v-model="oldPwd"></Input>
        </FormItem>
        <FormItem label="新密码">
          <Input type="password" v-model="newPwd"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
  <!-- <div class="main">
    <br />
    <RadioGroup v-model="theme2">
      <Radio label="light"></Radio>
      <Radio label="dark"></Radio>
    </RadioGroup>
  </div> -->
</template>

<script>
import axios from 'axios'
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      isCollapsed: false,
      openItem: ['月黑见渔灯', '文章发布', '管理员操作台'],
      shop: 'shop-list',
      oldPwd: '',
      newPwd: '',
      modal: false,
      Theme: 'light'
    }
  },
  computed: {
    // 获取vuex的标签集合数据
    ...mapState({
      tags: (state) => state.tabsList
    }),
    rotateIcon() {
      return ['menu-icon', this.isCollapsed ? 'rotate-icon' : '']
    },
    menuitemClasses() {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : '']
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.getpath(val)
      },
      // 深度观察监听
      deep: true
    }
  },
  created() {
    this.activeindex = window.sessionStorage.getItem('activeIndex')
    // 在页面加载时读取sessionStorage里的状态信息
    console.log(111)
    console.log(this.$store.state)
  },
  mounted() {
    // 被激活的菜单组
    this.$nextTick(function () {
      this.$refs.menu.updateActiveName()
    })
  },
  methods: {
    getpath(val) {
      this.$store.commit('selectMenu', { name: val.name, path: val.path })
    },
    ...mapMutations({
      close: 'closeTab'
    }),
    collapsedSider() {
      this.$refs.siders.toggleCollapse()
    },
    // 关闭标签
    handleClose(tag, index) {
      const length = this.tags.length - 1
      // vuex调方法的另一种写法
      this.close(tag)
      // 如果关闭的标签不是当前路由的话，就不跳转
      if (tag.name !== this.$route.name) {
        return
      }
      // 关闭的标签是最右边的话，往左边跳转一个
      if (index === length) {
        this.$router.push({ name: this.tags[index - 1].name })
      } else {
        // 否则往右边跳转
        this.$router.push({ name: this.tags[index].name })
      }
    },
    // 选择标签跳转路由
    changeMenu(tag) {
      this.$store.commit('selectMenu', tag)
      this.$router.push({ name: tag.name })
    },
    goTarget() {
      this.$router.push('/personTarget')
    },
    goliu() {
      this.$router.push('/listen')
    },
    goAWork() {
      this.$router.push('/work')
    },
    writeArt() {
      this.$router.push('/write')
    },
    handleSelect(index) {
      // console.log(this.act)
      // console.log(index)
    },
    readBook() {
      this.$router.push('/readbook')
    },
    ok() {
      const params = new URLSearchParams()
      params.append('oldPwd', this.oldPwd)
      params.append('newPwd', this.newPwd)
      axios.post('/liz/updatePwd', params).then((res) => {
        if (res.data.status !== 200) {
          this.$Message.error(res.data.message)
        } else {
          this.$Message.success('修改成功')
          this.logout()
        }
      })
    },
    view() {
      this.$router.push('/echart')
    },
    cancel() {
      // this.$Message.info('Clicked cancel')
    },
    logout() {
      window.sessionStorage.clear()
      this.$router.push('/')
    },
    gousers() {
      this.$router.push('/users')
    },
    goAbout() {
      this.$router.push('/user')
    }
  }
}
</script>

<style scoped lang='less'>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  height: 100vh;
  overflow: auto;
}
.layout-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  background-size: 100% 100%;
  background-image: url('../../assets/me.jpg');
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.ivu-layout-sider-children {
  height: 100vh !important;
}
body,
html {
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  overflow: hidden hidden;
}
.tags {
  height: 50px;
}
tagdie {
  line-height: 50px;
}
.ivu-tag {
  background-color: #fff !important;
  height: 25px;
  line-height: 25px;
  font-size: 15px;
}
.ivu-tag.ivu-tag-size-default.ivu-tag-primary.ivu-tag-closable.ivu-tag-checked {
  background-color: #4c84ff !important;
}
.ivu-tag.ivu-tag-size-default.ivu-tag-primary.ivu-tag-checked {
  background-color: #4c84ff !important;
}
.menu-icon {
  transition: all 0.3s;
}
.rotate-icon {
  transform: rotate(-90deg);
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu /deep/ .ivu-icon-ios-arrow-down {
  // color:#515a6e;
  display: none;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
</style>
